---
title: Chip
description: Chips represent input, attributes, or actions.
docType: Demo
docGroup: Components
group: Presentation
alias: [Tag]
components: [Chip]
---

# Chip

Chips represent input, attributes, or actions.

## Simple Example

A chip can be created by using the `Chip` component and should normally have a
`onClick` event handler.

```demo source="./SimpleChipExample.tsx"

```

### Chip Themes

The chip supports two themes: `"solid"` (default) and `"outline"`.

```demo source="./ChipThemeExample.tsx"

```

### Disabled Chip

A chip can be disabled by enabling the `disabled` prop which will update the
styles and prevent click event handlers from working.

```demo source="./DisabledChipExample.tsx"

```

## Chip with Addons

The `Chip`'s children can be any renderable element like icons, avatars, or
text but might require additional styling. Instead of providing icons and
avatars as children, use the `leftAddon` and `rightAddon` props which will
update the chip styles slightly.

- `leftAddon` - Decrease `padding-left` from `0.75rem` to `0.25rem`
- `rightAddon` - Decrease `padding-right` from `0.75rem` to `0.5rem`

```demo source="./ChipWithAddonsExample.tsx"

```

### Chip with Circular Progress

The `Chip` can also render the [CircularProgress](/components/progress#circular-progress)
component since it updates the progress bar size to be the icon size by default.
This is configurable by the [$SASSDOC](chip-progress-size) and
[$SASSDOC](chip-progress-width) Sass variables.

```demo source="./ChipWithCircularProgressExample.tsx"

```

## Selectable Chips

The `Chip` also supports a `selected` state which will render an icon when
selected before the `children` by default.

```demo source="./SelectableChipExample.tsx"

```

### Selected Icon After Content

Enable the `selectedIconAfter` prop if the selected icon should appear after the
`children` instead of before the children.

```demo source="./SelectedIconAfterExample.tsx"

```

### Custom Selected Icon

The `Chip` component will use the
[selected](/customization/icon-config#selected) icon from the `ICON_CONFIG` by
default. The icon can also be changed on a single component by providing the
`selectedIcon` prop.

```demo source="./CustomSelectedIconExample.tsx"

```

### Themed Selected State

The `Chip` can also gain a selected background color instead of rendering an
icon while selected by enabling the `selectedThemed` prop.

```demo source="./ThemedSelectedStateExample.tsx"

```

## Presentational Chips

If a chip is only used to represent an input or attributes, enable the
`noninteractive` prop to render the chip as a `span` instead of a `button`
or use the `chip` styling utility function.

> !Info! It is recommended to use the `chip` styling utility function if none of
> the chip functionality is required to reduce bundle size.

```demo source="./PresentationalChipsExample.tsx"

```
